<template>
  <div>
    <edu-dialog :title="$t('graduationDesign.courseSelection')" width="60%" @close="closeDialog" :visible="courseDialogVisible">
      <el-form :model="courseForm" label-position="right" label-suffix="：" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('graduationDesign.grade')">
              <el-date-picker class="search-item" clearable v-model="courseForm.gradeId" @change="handleGradeChange" value-format="yyyy" type="year" :placeholder="$t('graduationDesign.pleaseChoose')">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('graduationDesign.college')">
              <el-select v-model="courseForm.collegeId" @change="handleCollegeChange" filterable class="search-item" clearable>
                <el-option v-for="item in insource.collegeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('graduationDesign.major')">
              <el-select v-model="courseForm.subjectId" @change="handleSubjectChange" filterable class="search-item" clearable>
                <el-option v-for="item in insource.subjectOptions" :key="item.subjectId" :label="item.subjectIdI18n" :value="item.subjectId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table ref="courseSelectTable" :data="courseSelectTableData" @row-click="handleCourseRowClick" size="mini" stripe tooltip-effect="light">
        <el-table-column :label="$t('graduationDesign.choose')" min-width="60">
          <template slot-scope="scope">
            <el-radio v-model="currentRowId" :label="scope.row.teachingClassCode">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column :label="$t('graduationDesign.courseNum')" prop="teachingClassCode" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.courseName')" prop="courseName" min-width="100" show-overflow-tooltip></el-table-column>
      </el-table>
      <!-- <div class="float-right">
        <el-pagination :current-page.sync="pageParams.pageNum_" :page-sizes="[20, 50, 100, 500, 1000]" :page-size="pageParams.pageSize_" :total="pageParams.total_" layout="total, sizes, prev, pager, next, jumper" style="float: right;margin:10px 60px 0 0;" @size-change="onPageSizeChange" @current-change="onCurrentPageChange" />
      </div> -->
      <div slot="buttons">
        <el-button @click="closeDialog">{{$t('graduationDesign.cancel')}}</el-button>
        <el-button type="primary" @click="onSubmit">{{$t('graduationDesign.confirm')}}</el-button>
      </div>
    </edu-dialog>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/designStudentList";
import UTILS from "common/src/utils/utils";

export default {
  name: 'courseDialog',
  props: {
    courseDialogVisible: {
      type: Boolean,
      default: false
    },
    calendarId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      getCourseList: '',
      api: API,
      pageParams: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0
      },
      courseForm: {
        gradeId: '',
        collegeId: '',
        subjectId: '',
        calendarId: ''
      },
      insource: {
        collegeOptions: [],
        subjectOptions: []
      },
      courseSelectTableData: [], // 课程选择列表
      currentRowId: "",
      selectedCourseObj: {} // 选择的课程信息
    };
  },
  mounted() {
    this.getCollege();
  },
  methods: {
    searchList() {
      this.courseForm.calendarId = this.calendarId;
      const params = { ...this.courseForm };
      this.api.getCourseList(params).then(res => {
        this.courseSelectTableData = res.data;
      }).catch(() => { });
    },
    // 初始化数据
    clear() {
      this.courseForm.gradeId = "";
      this.courseForm.collegeId = "";
      this.courseForm.subjectId = "";
      this.currentRowId = "";
      this.insource.subjectOptions = [];
      this.selectedCourseObj = {};
      this.courseSelectTableData = [];
    },
    // 单选按钮选中
    handleCourseRowClick(row) {
      this.currentRowId = row.teachingClassCode;
      this.selectedCourseObj = { ...row };
    },
    // 查学院
    getCollege() {
      const params = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_YX"]
      };
      this.api.queryDic(params).then(res => {
        if (res.code == 200) {
          UTILS.fillSelect(
            { collegeOptions: 'X_YX' },
            res.data,
            this.insource
          );
        }
      });
    },
    // 年级change
    handleGradeChange(val) {
      this.insource.subjectOptions = [];
      this.courseForm.subjectId = "";
      this.currentRowId = "";
      this.courseSelectTableData = [];
      this.selectedCourseObj = {};
      if (val && this.courseForm.collegeId) {
        this.handleCollegeChange(this.courseForm.collegeId);
      }
    },
    // 选择年级 学院 查专业
    handleCollegeChange(val) {
      this.courseForm.subjectId = "";
      this.insource.subjectOptions = [];
      this.currentRowId = "";
      this.courseSelectTableData = [];
      this.selectedCourseObj = {};
      if (val && this.courseForm.gradeId) {
        this.api.getSubject(val, this.courseForm.gradeId).then(res => {
          this.insource.subjectOptions = res.data;
        }).catch();
      }
    },
    // 选完年级 学院 专业后 查列表
    handleSubjectChange(val) {
      this.currentRowId = "";
      this.courseSelectTableData = [];
      this.selectedCourseObj = {};
      if (val && this.courseForm.collegeId && this.courseForm.gradeId) {
        this.searchList();
      }
    },
    closeDialog() {
      this.$emit("courseClose");
    },
    // 课程提交
    onSubmit() {
      if (Object.keys(this.selectedCourseObj).length === 0) {
        this.$eduAlert(this.$t('graduationDesign.pleaseSelectCourse'), this.$t('graduationDesign.prompt'));
        return;
      }
      this.selectedCourseObj.calendarId = this.calendarId;
      this.$emit("courseSubmit", this.selectedCourseObj);
    }
  }
}
</script>
<style lang="scss" scoped>
.search-item {
    width: 100%;
}
</style>
